<template>
    <div class="department-details" v-if="department_details">
        <header>
            {{department_details.name}}
        </header>
        <div class="img-block">
            <img :src="department_details.file" alt="logo">
        </div>
        <div class="department-remark">
            <p>备注：{{department_details.remark}}</p>
        </div>
    </div>
</template>

<script>
import { mapGetters } from "vuex";

export default {
    name: "department-details",
    computed: {
        ...mapGetters("department1", ["department_details"])
    }
};
</script>

<style>
.department-details {
    /* width: 900px; */
    width: 64%;
    margin: 60px auto 0;
    background: #ffffff;
    border: 1px solid #e0e4eb;
    box-shadow: 0 0 10px 0 #e2e6ef;
}
.department-details header {
    height: 60px;
    line-height: 60px;
    padding-left: 36px;
    background-color: #f5f7f9;
}
.department-details .img-block {
    /* margin: 0 auto; */
    padding-left: 36px;
    margin-top: 36px;
    /* width: 300px;
    min-height: 200px; */
}
.department-details .img-block img {
    width: 100%;
}
.department-remark {
    width: 400px;
    margin: 20px 0 50px;
    padding-left: 36px;
}
</style>
